<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%
  pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 	<script type="text/javascript" src="${APP_PATH}/static/js/jquery-1.12.4.min.js"></script>
	<link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
	<script src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script>
    <meta name="Keywords" content="关键词,关键词">
    <meta name="description" content="">
    <title>公益众筹</title>
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/select-widget-min.js"></script>
    <link rel="stylesheet" href="css/drop-down.css" />
    <link rel="stylesheet" href="css/base.css" type="text/css"/>
    <link rel="stylesheet" href="css/headbott.css" type="text/css"/>
    <link rel="stylesheet" href="css/product-list.css" type="text/css"/>
</head>
<body>
<div id="header">
    <div class="heade-con">
    <div class="logo"><a href=""><img src="images/LOGO.png"/></a></div>
        <div class="nav posa">
            <ul>
                <li><a href="index.jsp">首页</a></li>
                <li><a class="vcolor" href="gyzc-list.jsp">公益众筹</a></li>
                <li><a href="cop.jsp">常见问题</a></li>
                <li><a href="ly-list.jsp">众筹资讯</a></li>
                <li><a href="new_product.jsp" style="">发布项目</a></li>
            </ul>
        </div>
        <div class="search">
            <form action="">
                <input type="text" class="search-txt" value="" placeholder="找项目">
                <input type="submit" class="search-but" value="">
            </form>
        </div>
        <div class="index-login">
        	
            <a href="login.jsp">登录</a>
            <span style="color: white;">|</span>
            <a href="reg.jsp">注册</a>
        </div>
    </div>
</div>
<div class="product-con">
	<h1 class="product-con_tit">公益众筹</h1>
    <div class="product-con_nav" id="projects_gylx">
    	<a href="#" id="All"><i><img src="images/ii_04.png" alt=""/></i>全部</a>
        <a href="#" id="education"><i><img src="images/ii_06.png" alt=""/></i>教育助学</a>
        <a href="#" id="love"><i><img src="images/ii_08.png" alt=""/></i>爱心环保</a>
        <a href="#" id="poverty"><i><img src="images/ii_10.png" alt=""/></i>扶贫助困</a>
        <a href="#" id="entrepreneur"><i><img src="images/ii_12.png" alt=""/></i>公益创业</a>
        <a href="#" id="activity"><i><img src="images/ii_14.png" alt=""/></i>公益活动</a>
        <div class="select-li">
        	<span>状态:</span>
        	<select name="drop2" class="ui-select" id="xmzt">
        		<option value="0">全部</option>
        		<option value="1">预热中</option>
	        	<option value="2">众筹中</option>
	        	<option value="3">众筹成功</option>
	        	<option value="4">项目结束</option>
        	</select>
        </div>
        <div class="select-li2">
        	<span>排序:</span>
        	<select name="drop2" class="ui-select" id="xmpx">
        		<option value="0">综合排序</option>
        		<option value="1">最新上线</option>
        		<option value="2">金额最多</option>
        		<option value="3">支持最多</option>
        		<option value="4">即将结束</option>
        	</select>
        </div>
	</div>
	<div class="product-list-l">
		<ul id="gylxxm">
        </ul>
    </div>
    <br>
    <div class="row">
    	<!-- 分页文字信息 -->
        <div class="col-md-6" id="page_info_area">          
        </div>
        <!-- 分页条信息 -->
        <div class="col-md-6" id="page_nav_area">
        </div>   
    </div>
</div>
<div id="bottom">
    <div class="bot-con1">
        <ul>
            <li class="bot-con1-li1">我们已经做到 </li>
            <li>单项支持人数<span class="inde-span1"></span></li>
            <li>单项筹款金额<span class="inde-span2"></span></li>
            <li>累计筹款金额<span class="inde-span3"></span></li>
        </ul>
    </div>
    <div class="bot-con1 bot-con2">
        <ul>
            <li class="bot-con1-li1">发起项目流程 </li>
            <li><span class="inde-span4"></span>发起人创建项目</li>
            <li><span class="inde-span5"></span>项目获得支持</li>
            <li><span class="inde-span6"></span>发起人发放回报</li>
            <li><span class="inde-span7"></span>用户收到回报</li>
        </ul>
    </div>
    <div class="bottom-ggt"><a href=""><img src="images/bottbom_68.jpg" alt=""/></a></div>
    <div class="zc-yqlink">
        <ul>
            <li><a href="">阿里巴巴集团</a></li>
            <li><a href="">淘宝网</a></li>
            <li><a href="">天猫</a></li>
            <li><a href="">聚划算</a></li>
            <li><a href="">全球速卖通</a></li>
            <li><a href="">阿里巴巴国际交易市场</a></li>
            <li><a href="">1688</a></li>
            <li><a href="">阿里妈妈</a></li>
            <li><a href="">阿里旅行</a></li>
            <li><a href="">阿里云计算</a></li>
            <li><a href="">阿里巴巴集团</a></li>
            <li><a href="">淘宝网</a></li>
            <li><a href="">天猫</a></li>
            <li><a href="">聚划算</a></li>
            <li><a href="">全球速卖通</a></li>
            <li><a href="">阿里巴巴国际交易市场</a></li>
            <li><a href="">1688</a></li>
            <li><a href="">阿里妈妈</a></li>
            <li><a href="">阿里云计算</a></li>
        </ul>
    </div>
    <div class="footer-bd">

            <a href=" ">关于淘宝</a>
            <a href=" ">合作伙伴</a>
            <a href=" ">营销中心</a>
            <a href=" ">廉正举报</a>
            <a href=" ">联系客服</a>
            <a href=" ">开放平台</a>
            <a href=" ">诚征英才</a>
            <a href=" ">联系我们</a>
            <a href=" ">网站地图</a>
            <a href=" ">法律声明</a>　　　
            <em>© 2003-2015 Taobao.com 版权所有</em><br>

       <br>
            <span>网络文化经营许可证：<a href=" ">浙网文[2013]0268-027号</a></span>
            <b>|</b>
            <span data-spm-protocol="i">增值电信业务经营许可证：<a href="">浙B2-20080224-1</a></span>
            <b>|</b>
            <span>信息网络传播视听节目许可证：1109364号</span>
            <b>|</b>
            <span>举报电话:0571-81683755</span>
    </div>
</div>
<script type="text/javascript">	
	$(function(){
		if(window.location.href.indexOf("?")==-1){
			window.pstId=0;
		}else{
			id=window.location.href.split("?")[1];
			Id=id.split("=")[1];//得到传过来的公益类型id;
			if(Id.indexOf("#")==-1){
				window.pstId=Id;
			}else{
				window.pstId=Id.split("#")[0];
			}
		}
		//项目排序
		if(window.xmpxValue==undefined){
			window.xmpxValue=0;
		}
		//项目状态
		if(window.zmztValue==undefined){
			window.zmztValue=0;
		}
		//该id公益类型高亮
		highlight( );
		//获取该类型下的所有项目信息
		build_gylx_projects(1);
	});
	function build_gylx_projects(pn){
		var time=Math.random();
		$.ajax({
			url:"${APP_PATH}/gylxprojects",
			data:{"pstId":window.pstId,"pn":pn,"zmztValue":window.zmztValue,"xmpxValue":window.xmpxValue,"time":time},
			type:"GET",
			success:function(result){
				//console.log(result);
				//公益类型下所有项目信息展示
				gylx_projects_show(result);
				//解析显示分页数据
				build_peojects_pageinfo(result);
				//解析显示分页条数据
				build_peojects_pagenav(result);
			}
		});
	}
	function gylx_projects_show(result){
		//清空公益类型下的项目
		$("#gylxxm").empty();
		 $.each(result.extend.gylxprojects.list,function(index,item){
 			var dl1=$("<dl></dl>").append($("<dt></dt>")
					.append((Math.round((item.psGetmoney/item.psMoney)*10000))/100.00))
					.append($("<dd></dd>").append("达成率"));
			var dl2=$("<dl></dl>").append($("<dt></dt>")
					.append(item.psGetmoney)).append($("<dd></dd>").append("已筹金额"));
			var dl3=$("<dl></dl>").append($("<dt></dt>")
					.append(item.psGetpeople)).append($("<dd></dd>").append("支持人数"));
			var divdl=$("<div></div>").addClass("product-list-lmin")
					.append(dl1).append(dl2).append(dl3);
			var pa=$("<p></p>").append($("<a></a>")
					.attr("href","product-detail2.jsp?psId="+item.psId).append(item.psName));
			var a = $("<a></a>").attr("href","product-detail2.jsp?psId="+item.psId).append($("<img/>")
					.attr("src","images/prr-dduu_27.jpg"));
			var div = $("<div></div>").addClass("product_one").append(determineType(item.psType));
			var diva = $("<div></div>").addClass("product-list-lpic")
					.append(a).append(div);
			$("<li></li>").addClass(colourshow(item.psType)).append(diva).append(pa).append(divdl).appendTo("#gylxxm");
		});
	}
	//类型的判断
	function determineType(type){
		if(type==1){
			return "预热中";
		}else if (type==2){
			return "众筹中";
		}else if (type==3){
			return "众筹成功";
		}else if (type==4){
			return "众筹失败";
		}
	}
	//显示颜色的判断
	function colourshow(type){
		if(type==1){
			return "yrz";
		}else if (type==2){
			return "zcz";
		}else if (type==3){
			return "cz";
		}else if (type==4){
			return "sb";
		}
	}
	//解析显示分页信息
    function build_peojects_pageinfo(result){
 	   //清空分页信息
 	   $("#page_info_area").empty();
 	   $("#page_info_area")
 	   .append("当前第"+result.extend.gylxprojects.pageNum+
 			   "页,总共"+result.extend.gylxprojects.pages+"页,总共"
 			   +result.extend.gylxprojects.total+"条记录");
    }
    //解析分页条
    function build_peojects_pagenav(result){
 	//清空分页条
 	   $("#page_nav_area").empty();
 	   var ul=$("<ul></ul>").addClass("pagination");
 	   var firstPageLi=$("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
 	   var prePageLi=$("<li></li>").append($("<a></a>").append("&laquo;").attr("href","#"));
 	   if(result.extend.gylxprojects.hasPreviousPage==false){
 		   firstPageLi.addClass("disabled");
 		   prePageLi.addClass("disabled");
 	   }else{    		   
 	   prePageLi.click(function(){
 		  build_gylx_projects(result.extend.gylxprojects.pageNum-1);
 	   });
 	   firstPageLi.click(function(){
 		  build_gylx_projects(1);
 	   });
 	   }
 	   var nextPageLi=$("<li></li>").append($("<a></a>").append("&raquo;").attr("href","#"));
 	   var lastPageLi=$("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
 	   if(result.extend.gylxprojects.hasNextPage==false){
 		   nextPageLi.addClass("disabled");
 		   lastPageLi.addClass("disabled");
 	   }else{    		   
 	   nextPageLi.click(function(){
 		  build_gylx_projects(result.extend.gylxprojects.pageNum+1);
 	   });
 	   lastPageLi.click(function(){
 		  build_gylx_projects(result.extend.gylxprojects.pages);
 	   });
 	   } 
 	   ul.append(firstPageLi).append(prePageLi);
 	   $.each(result.extend.gylxprojects.navigatepageNums,function(index,item){
 		   var numLi=$("<li></li>").append($("<a></a>").append(item).attr("href","#"));
 		   if(result.extend.gylxprojects.pageNum==item){
 			   numLi.addClass("active");
 		   }
 		   numLi.click(function(){
 			  build_gylx_projects(item);
 		   });
 		   ul.append(numLi);
 	   });
 	   ul.append(nextPageLi).append(lastPageLi);
 	   //把ul添加到nav
 	   $("<nav></nav>").append(ul).appendTo("#page_nav_area");
    } 
    function highlight(){
    	$("#projects_gylx a").removeClass("lnav_bg");
    	if(window.pstId==0){
    		$("#All").addClass("lnav_bg");
    	}else if(window.pstId==1){
    		$("#education").addClass("lnav_bg");
    	}else if(window.pstId==2){
    		$("#love").addClass("lnav_bg");
    	}else if(window.pstId==3){
    		$("#poverty").addClass("lnav_bg");
    	}else if(window.pstId==4){
    		$("#entrepreneur").addClass("lnav_bg");
    	}else if(window.pstId==5){
    		$("#activity").addClass("lnav_bg");
    	}
    }
    //全部
    $("#All").click(function(){
    	window.pstId=0;
    	//该id公益类型高亮
		highlight();
		//获取该类型下的所有项目信息
		build_gylx_projects(1);
    }
    );
    //教育助学
    $("#education").click(function(){
    	window.pstId=1;
    	//该id公益类型高亮
		highlight();
		//获取该类型下的所有项目信息
		build_gylx_projects(1);
    }
    );
    //爱心环保
    $("#love").click(function(){
    	window.pstId=2;
    	//该id公益类型高亮
		highlight();
		//获取该类型下的所有项目信息
		build_gylx_projects(1);
    }
    );
  	//扶贫助困
    $("#poverty").click(function(){
    	window.pstId=3;
    	//该id公益类型高亮
		highlight();
		//获取该类型下的所有项目信息
		build_gylx_projects(1);
    }
    );
    //公益创业
    $("#entrepreneur").click(function(){
    	window.pstId=4;
    	//该id公益类型高亮
		highlight();
		//获取该类型下的所有项目信息
		build_gylx_projects(1);
    }
    );
    //公益活动
    $("#activity").click(function(){
    	window.pstId=5;
    	//该id公益类型高亮
		highlight();
		//获取该类型下的所有项目信息
		build_gylx_projects(1);
    }
    );
    //项目状态
    $("#xmzt").change(function(){
    	 window.zmztValue=$(this).val();//获取Select选择的Value
    	//动态生成排序框
    	//select_xmpx();
    	//获取该类型下的所有项目信息
 		build_gylx_projects(1);
    });
    //项目排序
    $("#xmpx").change(function(){
    	 window.xmpxValue=$(this).val();//获取Select选择的Value
    	//动态生成状态框
    	//select_xmzt();
    	//获取该类型下的所有项目信息
  		build_gylx_projects(1);
    });
   	function select_xmpx(){
   		
   	};
    </script>
</body>
</html>